import React, {useEffect} from 'react';
import {Button, Col, DatePicker, Form, Input, InputNumber, Modal, Row, Select,} from 'antd';
import {formInputRules, formTextAreaRules, phoneRules} from '@/utils/rules';
import {filterEmpty} from '@/utils/methods';

import {addOrModifyEmergency, getEmergencyPlanPage, queryEmergency} from '@/services/emergency';
import moment from 'dayjs';
import RegionCascader from "@/components/RegionCascader";
import useRegions from "@/hooks/useRegions";
import LngLatChoose from "@/components/LngLatChoose";
import {EmergencyLevelMap} from "@/enums/emergency/map";
import {useRequest} from "ahooks";

const EditReportModal: React.FC<any> = ({emergencyId, dispatch, onSuccess, ...props}: any) => {
  const [form] = Form.useForm();
  const [regions] = useRegions();
  // 提交
  const {
    run: runSubmit,
    loading: loadingSubmit
  } = useRequest((values) => {
    const params = filterEmpty({
      originValues: values,
      keepEmpty: true,
    });
    params.emergencyTime &&
    (params.emergencyTime = params.emergencyTime.format(
      'YYYY-MM-DD HH:mm:ss',
    ));
    params.receiverTime &&
    (params.receiverTime = params.receiverTime.format('YYYY-MM-DD HH:mm:ss'));
    params.reportTime &&
    (params.reportTime = params.reportTime.format('YYYY-MM-DD HH:mm:ss'));
    emergencyId && (params.id = emergencyId);
    const zoneCodeArr =
      params.zoneCode[params.zoneCode.length - 1].split('###');
    params.zoneCode = zoneCodeArr[0];
    if (params.lnglat) {
      params.gpsx = params.lnglat.lng;
      params.gpsy = params.lnglat.lat;
      delete params.lnglat;
    }
    return addOrModifyEmergency(params)
  }, {
    manual: true,
    onSuccess(res) {
      dispatch({
        open: false
      })
      onSuccess && onSuccess(res)
    }
  })
  // 获取预案列表
  const {
    run: runPlanList,
    data: dataPlanList,
    loading: loadingPlanList
  } = useRequest(() => getEmergencyPlanPage({page: 1, pageSize: 1000}).then((res: any) => {
    console.log('res.records', res);
    if (res.list && res.list.length) {
      const options = res.list.map((item: any) => ({
        label: item.name,
        value: item.id,
      }));
      return options;
    }
    return []
  }), {})
  // 获取回显详情
  const {
    run: runDetail,
  } = useRequest(() => queryEmergency({
    id: emergencyId
  }).then((res: any) => {

    form.setFieldsValue({
      reporterPhone: res.reporterPhone,
      deadPersons: res.deadPersons,
      title: res.title,
      reporterName: res.reporterName,
      demo: res.demo,
      ecoLoss: res.ecoLoss,
      receiverPhone: res.receiverPhone,
      // gPsx: res.gPsx,
      // gPsy: res.gPsy,
      lnglat: {lng: res.gpsx, lat: res.gpsy},
      info: res.info,
      currentDetail: res.currentDetail,
      receiverTime: res.receiverTime ? moment(res.receiverTime) : null,
      address: res.address,
      orgName: res.orgName,
      level: res.level,
      receiverName: res.receiverName,
      missingPersons: res.missingPersons,
      orgPhone: res.orgPhone,
      emergencyPlanId: res.emergencyPlanId,
      emergencyTime: res.emergencyTime ? moment(res.emergencyTime) : null,
      seriousPersons: res.seriousPersons,
      involvePersons: res.involvePersons,
      videoOrder: res.videoOrder,
      zoneCode: res.zoneCode,
      slightPersons: res.slightPersons,
      reportTime: res.reportTime ? moment(res.reportTime) : null,
      statusFlag: res.statusFlag,
    });
  }))

  useEffect(() => {
    if (props.open) {
      runPlanList();
      emergencyId && runDetail();
    } else {
      form.resetFields();
    }
  }, [props.open]);
  return (
    <Modal
      {...props}
      getContainer={false}
      onCancel={() => {
        dispatch({
          clear: true,
          open: false
        })
      }}
      footer={
        props.disabled
          ? false
          : [
            <Button key="cancel" onClick={() => {
              dispatch({
                clear: true,
                open: false
              })
            }}>
              关闭
            </Button>,
            <Button
              type="primary"
              key="submit"
              loading={loadingSubmit}
              onClick={async () => {
                const value: any = await form.validateFields()
                runSubmit(value)
              }}
            >
              保存
            </Button>,
          ]
      }
    >
      <Form
        form={form}
        aria-disabled={true}
        labelCol={{span: 9, offset: 0}}
      >
        <Row gutter={24}>
          <Col span={7}>
            <Form.Item
              name="reporterName"
              label="上报人"
              labelCol={{span: 7, offset: 0}}
              rules={[
                ...formInputRules,
                {
                  required: true,
                  message: '请输入上报人',
                },
              ]}
            >
              <Input disabled={props.disabled}/>
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item
              name="reporterPhone"
              label="上报人电话"
              rules={[...phoneRules]}
              validateTrigger="onBlur"
            >
              <Input disabled={props.disabled}/>
            </Form.Item>
          </Col>
          <Col span={9}>
            <Form.Item name="reportTime" label="上报时间">
              <DatePicker format="YYYY-MM-DD" disabled={props.disabled}/>
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={24}>
          <Col span={7}>
            <Form.Item
              name="receiverName"
              label="接警人"
              labelCol={{span: 7, offset: 0}}
              rules={[
                ...formInputRules,
                {
                  required: true,
                  message: '请输入接警人',
                },
              ]}
            >
              <Input disabled={props.disabled}/>
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item
              name="receiverPhone"
              label="接警人电话"
              rules={[...phoneRules]}
              validateTrigger="onBlur"
            >
              <Input disabled={props.disabled}/>
            </Form.Item>
          </Col>
          <Col span={9}>
            <Form.Item name="receiverTime" label="接警时间">
              <DatePicker format="YYYY-MM-DD" disabled={props.disabled}/>
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={24}>
          <Col span={7}>
            <Form.Item
              name="title"
              label="名称"
              labelCol={{span: 7, offset: 0}}
              rules={[
                ...formInputRules,
                {
                  required: true,
                  message: '请输入事件名称',
                },
              ]}
            >
              <Input disabled={props.disabled}/>
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item
              name="lnglat"
              label="经纬度"
              rules={[
                {
                  required: true,
                  message: '请填写经纬度',
                },
              ]}
            >
              <LngLatChoose disabled={props.disabled}/>
            </Form.Item>
          </Col>
          <Col span={9}>
            <Form.Item
              label="行政区划"
              name="zoneCode"
              rules={[
                {
                  required: true,
                  message: '请填写行政区划',
                },
              ]}
            >
              {
                // @ts-ignore
                <RegionCascader placeholder="请选择行政区划" options={regions} disabled={props.disabled}/>
              }
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={24}>
          <Col span={7}>
            <Form.Item
              name="address"
              label="地点"
              labelCol={{span: 7, offset: 0}}
              rules={[
                ...formInputRules,
                {
                  required: true,
                  message: '请填写地点',
                },
              ]}
            >
              <Input disabled={props.disabled}/>
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item
              name="emergencyTime"
              label="发生时间"
              rules={[
                {
                  required: true,
                  message: '请选择发生时间',
                },
              ]}
            >
              <DatePicker format="YYYY-MM-DD" disabled={props.disabled}/>
            </Form.Item>
          </Col>
          <Col span={9}>
            <Form.Item
              name="emergencyPlanId"
              label="预案名称"
              rules={[
                {
                  required: true,
                  message: '请选择预案名称',
                },
              ]}
            >
              <Select
                loading={loadingPlanList}
                placeholder="请选择"
                options={dataPlanList}
                style={{width: '210px'}}
                disabled={props.disabled}
              />
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={24}>
          <Col span={7}>
            <Form.Item
              name="level"
              label="事件等级"
              labelCol={{span: 7, offset: 0}}
            >
              <Select
                placeholder="请选择"
                options={EmergencyLevelMap.toOption()}
                disabled={props.disabled}
              />
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item name="involvePersons" label="涉及游客人数">
              <InputNumber disabled={props.disabled}/>
            </Form.Item>
          </Col>
          <Col span={9}>
            <Form.Item name="missingPersons" label="下落不明人数">
              <InputNumber disabled={props.disabled}/>
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={24}>
          <Col span={7}>
            <Form.Item
              name="deadPersons"
              label="死亡人数"
              labelCol={{span: 7, offset: 0}}
            >
              <InputNumber disabled={props.disabled}/>
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item name="seriousPersons" label="重伤人数">
              <InputNumber disabled={props.disabled}/>
            </Form.Item>
          </Col>
          <Col span={9}>
            <Form.Item name="slightPersons" label="轻伤人数">
              <InputNumber disabled={props.disabled}/>
            </Form.Item>
          </Col>
        </Row>
        <Row gutter={24}>
          <Col span={7}>
            <Form.Item
              name="orgName"
              label="管辖单位"
              labelCol={{span: 7, offset: 0}}
            >
              <Input disabled={props.disabled}/>
            </Form.Item>
          </Col>
          <Col span={8}>
            <Form.Item name="orgNamePerson" label="单位负责人">
              <Input disabled={props.disabled}/>
            </Form.Item>
          </Col>
          <Col span={9}>
            <Form.Item
              name="orgPhone"
              label="单位负责人电话"
              rules={[...phoneRules]}
              validateTrigger="onBlur"
            >
              <Input disabled={props.disabled}/>
            </Form.Item>
          </Col>
        </Row>
        <Form.Item
          name="ecoLoss"
          label="预估经济损失"
          labelCol={{span: 3}}
          rules={[...formTextAreaRules]}
        >
          <Input.TextArea disabled={props.disabled}/>
        </Form.Item>
        <Form.Item
          name="currentDetail"
          label="目前事件状态"
          labelCol={{span: 3}}
          rules={[...formTextAreaRules]}
        >
          <Input.TextArea disabled={props.disabled}/>
        </Form.Item>
        <Form.Item
          name="info"
          label="简要描述"
          labelCol={{span: 3}}
          rules={[...formTextAreaRules]}
        >
          <Input.TextArea disabled={props.disabled}/>
        </Form.Item>
        <Form.Item
          name="demo"
          label="备注"
          labelCol={{span: 3}}
          rules={[...formTextAreaRules]}
        >
          <Input.TextArea disabled={props.disabled}/>
        </Form.Item>
      </Form>
    </Modal>
  );
}

export default EditReportModal;
